<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>FarmaSoft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResourcesPortada.jsp" %>
<script src="<c:url value="/resources/js/portada/departaments/jquery.min.js"/>"></script>
<script src="<c:url value="/resources/js/portada/departaments/jquery.mCustomScrollbar.concat.min.js"/>"></script>

<!-- Js de imagenes pequeñas -->
<script src="<c:url value="/resources/js/portada/departaments/jquery-1.6.2.min.js"/>"></script>
<script src="<c:url value="/resources/js/portada/departaments/jquery.prettyPhoto.js"/>"></script>
<script src="<c:url value="/resources/js/portada/departaments/jquery.quicksand.js"/>"></script>
<script src="<c:url value="/resources/js/portada/departaments/jquery.easing.1.3.js"/>"></script>
<script src="<c:url value="/resources/js/portada/departaments/script.js"/>"></script>
<link href="<c:url value="/resources/css/portada/department/jquery.mCustomScrollbar.css" />" rel="stylesheet">
<link href="<c:url value="/resources/css/portada/slider/style.css" />" rel="stylesheet">
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
  <style>
	label.error{
	    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	    -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	    border-radius:5px;
	    -webkit-border-radius: 5px;
	    background: red;
	    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	    color: #fff;
	    display: none;
	    font-size: 10px;
	    margin-top: 2px;
	    margin-left: 2%;
	    padding: 0px 2px;
	    position: absolute;
	}
	label.error:before{ 
	    content: '';
	    border-top: 5px solid transparent;
	    border-bottom: 5px solid transparent;
	    border-right: 5px solid #BC1010;
	    border-left: 5px solid transparent;
	    border-width: 4px 6px;
	    display: block;
	    height: 0;
	    left: -12px;
	    position: absolute;
	    top: 3px;
	    width: 0;
	}
	
	/*Para Scroll*/
	.links a,.demo_functions a{display:inline-block; padding:3px 15px; margin:7px 10px; background:rgba(255,255,255,0.15); text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
	code{color:#5b70ff;}
	.content form input{color:#eee; border:none; background:rgba(0,0,0,0.2); -webkit-border-radius:3px; -moz-border-radius:3px; /*color de input para llenar texto*/ border-radius:3px; margin-bottom:10px; padding:0 5px; height:25px; width:120px; -webkit-box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4); -moz-box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4); box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4);}
	h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
	h2{font-family:Georgia,serif; font-size:18px; font-style:normal; color: #003a96;}
	
	h3{font-family:Georgia,serif; font-size:11px; font-style:italic; color:#666666;}
	h4{font-family: Arial, Helvetica, sans-serif; font-size:13px; font-style:normal; color:#ffffff;}
	.links{margin:10px;}
	.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
	.links a:hover{background:#eb3755; color:#fff;}
	/*Contenido de scroll tamaño */
	.content{margin:0 0 0px 0px; width:90%; height:430px; padding:10px; overflow:auto; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; float:left;}
	#content_5{color:#333; background:#e9effd;}
	#content_5  p:nth-child(even){color:#666;}	
	
</style>

<style type="text/css">
.stpulldown-gradient
{
	background: #E1E1E1;
	background: -moz-linear-gradient(top, #E1E1E1 0%, #A7A7A7 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1E1E1), color-stop(100%,#A7A7A7)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1E1E1', endColorstr='#A7A7A7',GradientType=0 ); /* ie */
	background: -o-linear-gradient(top, #E1E1E1 0%,#A7A7A7 100%); /* opera */
	color: #636363;
}
#stpulldown .stpulldown-logo
{
	height: 40px;
	width: 300px;
	margin-left: 20px;
	margin-top: 5px;
	background:url("http://sd.sharethis.com/disc/images/Logo_Area.png") no-repeat;
}

/*Para las imagenes de la columna 1*/
ul { list-style: none; }

.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }

dl { margin-bottom: 20px; color: #777; }
dt, dd { float: left; }
dt { margin-right: 5px; }
.filter li:last-child:after { content: ""; }
.filter a { padding: 4px 17.5%; color: #c0c3c5; text-decoration: none; margin-bottom: 5px; }
.filter a:hover, .current a { color: #ffffff;}

/* Portfolio Items */
.portfolio li { float: left; margin-right: 10px; margin-bottom: 10px; border: 1px solid #ccc; -moz-box-shadow: 0 5px 5px -3px #222; -webkit-box-shadow: 0 5px 0px -3px #222; box-shadow: 0 5px 5px -3px #222; }
.portfolio li:nth-child(4n) { margin-right: 0; }
.portfolio a { display: block; border: 3px solid #fff;  text-decoration: none; }
.portfolio img { width: 110px; height: 60px; display: block; border: 1px solid #ccc; }

/*Contenedor de las imagenes*/
.containerItems {
    background-color: #4d6ea7;
    padding: 1px;
}

.text {
    width: 110px;
    height: 100px;
    background-color: transparent;
    padding: 2px;
    color: #fefeff;
    position: absolute;
   
}
</style>
<script type="text/javascript">
		$(document).ready(function(){
			showed();
			$("#dialogo").dialog({
				autoOpen: false,
		        title: "Farmacia",
				height: 250,
				width: 550,
				modal: true,
				buttons: {
		            "Aceptar": function() {
		            	var flag = $("#formDialog").valid();
                        if(flag){
    		            	location.href = "index2?_userId="+$("#userId").val()+"&_pharmacyId="+$("#pharmacyId").val();
                        }
		            },
		            Cancelar: function() {
		            	location.href = "index";
		                $( this ).dialog( "close" );
		            }
				},
				close: function() {
					location.href = "index";
				}
			});				
		});

		function showed(){
			$( "#dialog-message" ).dialog({
				modal: true,
				buttons: {
					Ok: function() {
						location.href = "index";
						$( this ).dialog( "close" );
					}
				},
				close: function() {
					location.href = "index";
				}
			});	 
		}
		/*Para redireccionar el combo*/
		function url(uri) {
		location.href = uri;  }	
				
		(function($){
			$(window).load(function(){
				
				$("#content_5").mCustomScrollbar({
					scrollButtons:{
						enable:true
					},
					theme:"light-thick"
				});
			});
		})(jQuery);
</script>

<script type="text/javascript">stLight.options({publisher: "15ee7716-0c7d-4401-8987-051496526cd2", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
var options={ "publisher": "15ee7716-0c7d-4401-8987-051496526cd2", "scrollpx": 50, "ad": { "visible": false}, "chicklets": { "items": ["facebook", "googleplus", "twitter", "email", "sharethis"]}};
var st_pulldown_widget = new sharethis.widgets.pulldownbar(options);
</script>

</head>

<body>
<c:set var="dept" value="${param._dept}"/> <!-- Recupera el get -->
<c:set var="arti" value="${param._arti}"/>
<c:set var="sect" value="${param._sect}"/>

	<div id="header">
		<div class="logindept">
			<label class="form_align35" style="color: #ffffff;">Departamento :</label>
			<select name="idCountry" id="idCountry" class="required form_input_align" title="Seleccione el Pais" onchange="url(this.value);">
					<option value=""><fmt:message key="form.selected"/></option>
					<c:forEach var="item" items="${comboDepartaments}">
						<c:set var="selec" value="" />
						<c:if test="${dept == item[0]}">
							<c:set var="selec" value="selected='selected'" />
						</c:if>
						<option value="homeDepartamemts.html?_dept=${item[0]}" ${selec}>${item[1]} - ${item[2]}</option>
					</c:forEach>
			</select>
		</div>
		<ul id="menu">
			<li><a href="index.html">Página de Inicio </a></li>
			<li><a href="articlesDepartmentsAll.html?_dept=${dept}">Artículos de Interés</a></li>
		</ul>
	</div>
	<div id="wrapper">																																																																																		
		<div id="sidebar">
			<div class="logo_block">
				<a href="#"><img src="<c:url value="/resources/images/portada/logo.png" />" alt="setalpm" width="198"/></a><br />
				<div class="myInlineDiv"><h4>ARTÍCULOS DE INTERÉS<br/></h4></div>
				<div id="content_5" class="content">
					<dd>
						<ul class="filter group">
							<li class="current all"><a href="#" class="button">Todos</a></li>
							<c:forEach var="item" items="${articulosActivos}">
		                		<li class="${item.articleId}"><a href="#" class="button" title="${item.tittle}">${item.tittle}</a></li>
							</c:forEach>
						</ul>
					</dd>
	  			</div>
			</div>
		</div>
	
		<div id="content">
			<div class="bt">
				<div>
					<ul class="filterRef group"> 
						<li><a href="http://localhost:8080/farmasoft/index"><img src="<c:url value="/resources/images/portada/inicio.png" />" width="18"/></a></li>
							<c:forEach var="itemP" items="${comboDepartaments}">
								<c:if test="${dept == itemP[0]}">
									<li><a href="homeDepartamemts.html?_dept=${dept}"><img src="<c:url value="/resources/images/portada/inicio.png" />" width="15"/>${itemP[1]}</a></li>
								</c:if>
							</c:forEach>
						<li><span>Artículos de Interés</span></li>
					</ul>
				</div>
				
					<c:forEach var="item" items="${Departament}">
	                   <center><h2><span style="color: #003a96">${item[1]} - ${item[2]}</span></h2></center><br />
	                </c:forEach>
						<center><h2><span style="color: #003a96">Artículos de Interés</span></h2></center><br />
						
						
						<ul class="portfolio group">
							<c:forEach var="itemS" items="${listaOfSection}">
								<c:choose>
									<c:when test="${itemS.image!=null}">
										<li data-id="${itemS.sectionId}" data-type="${itemS.articleId.articleId}">
											<a class="buttonItems" href="articlesSectiDepartament.html?_dept=${dept}&_arti=${itemS.articleId.articleId}&_sect=${itemS.sectionId}">
												<div class="text">${itemS.tittle}</div><br/><br/><img src="<c:url value="/resources/images/portada/departamentos/seccion/${itemS.image}" />" width="90" height="100" alt="${itemS.tittle}"/></a>
										</li>
									</c:when>
									<c:otherwise>
										<li data-id="${itemS.sectionId}" data-type="${itemS.articleId.articleId}">
											<a class="buttonItems" href="articlesSectiDepartament.html?_dept=${dept}&_arti=${itemS.articleId.articleId}&_sect=${itemS.sectionId}">
												<div class="text">${itemS.tittle}</div><br/><br/></a>										</li>
									</c:otherwise>
								</c:choose>
							</c:forEach>
						</ul>	
				</div>			
			</div>
		</div>
	</div>
	<div id="footer">																																																																																																																																																																																																									
		<ul>
			<li><a href="index.html">Página de Inicio</a>|</li>
			<li><a href="articlesDepartmentsAll.html?_dept=${dept}">Artículos de Interés</a></li>
		</ul>
		<p>UltraSoft Ltda.&copy; Soluciones Informáticas. <a href="https://www.facebook.com/farmasoft.bo" target="_blank" title="Best Free Templates">FarmaSoft</a>  </p>
	</div>
</body>

</html>

